<template>
    <div class="prize-topic-suspend">
        <topic-act
                ref="topicAct"
                v-if="prizeTopic && prizeTopic.show"
                :appraiseProp="prizeTopic"
                @showAppraise="$emit('showAppraise')"
        ></topic-act>
        <!--好玩里面显示-->
        <div class="prize-topic-slide" v-if="prizeTopic.content || prizeTopic.title" @click="$emit('clickTitle',swiperItem)">
            <div class="prize-topic-title-box">
                <p class="prize-topic-title" v-if="prizeTopic.title">
                    <span class="topic-title-icon">#</span>
                    {{prizeTopic.title}}
                </p>
                <div class="topic-sub-tile">
                    <span class="topic-sub1">拍话题视频</span>
                    <span class="topic-sub2">集赞赢大奖</span>
                </div>
                <p class="one-line-ellepsis topic-content" v-if="prizeTopic.content">{{prizeTopic.content}}</p>
            </div>
        </div>
        <!--<div v-else-if="swiperItem.constructor === Object && Object.keys(swiperItem).includes('belongUserInfo')">-->
            <!---->
        <!--</div>-->
    </div>
</template>

<script>
    export default {
        name: "PrizeTopicSuspend",
        props:{
            swiperItem:Object,
        },
        data(){
            return{
                prizeTopic:{
                    show:false,
                },
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){
                let url = '';
                if(this.swiperItem.actKey){
                    url = `${this.NW_API_API_LOCALE_VERSION}/interact/detail/${this.userId}/topic/${this.swiperItem.actKey}`;
                }else if(this.swiperItem.constructor === Object && Object.keys(this.swiperItem).includes('interactModel') && this.swiperItem.interactModel.interactId){
                    url = `${this.NW_API_API_LOCALE_VERSION}/interact/detail/${this.userId}/topic/${this.swiperItem.interactModel.interactId}`;
                }
                console.log(url)
                this.xurl.get(url).then(data => {
                    if(data.success){
                        let tempObj = {
                            show:false,
                        };
                        this.prizeTopic = Object.assign({},this.prizeTopic,data.result,tempObj);
                    } else{
                    }
                })
            },
            showTopic(boolean = true){
                if(Object.keys(this.prizeTopic).length > 1 && boolean){
                    this.prizeTopic.show = true;
                }else if(!boolean){
                    this.prizeTopic.show = false;
                }
            }
        },
        watch:{
            // swiperItem(val){
            //     this.prizeTopic = Object.assign({},this.prizeTopic,val);
            // }
        },
        components:{
            'topic-act': () => import('./PrizeTopic'),
        }
    }
</script>

<style scoped>
    .prize-topic-title-box{
        background-color: rgba(0,0,0,.6);
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        padding: .12rem;
        max-width: 2.96rem;
        line-height: .22rem;
    }
    .topic-title-icon{
        display: inline-block;
        width: .16rem;
        height: .16rem;
        background-color: #FFBF00;
        text-align: center;
        line-height: .18rem;
        color: #fff;
        font-weight: bold;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .prize-topic-title{
        font-size: .16rem;
        color: #fff;

    }
    .prize-topic-slide{
        position: absolute;
        bottom: .73rem;
        left: .16rem;
        z-index: 1;
    }
    .topic-sub-tile,.topic-content{
        font-size: .12rem;
        color: rgba(255,255,255,.8);
    }
    .topic-sub1{
        padding-right: .1rem;
    }
</style>